<template>
	<view class="column grades-item" style="margin-top: 50rpx;"  :class="isGrades?'view-active':''">
		<view class="row align-items-center grades">
			<image style="width: 100rpx;height: 100rpx;" :src="imgUrl" mode=""></image>
		</view>
		<text style="margin-top: 20rpx;">{{title}}</text>
		<view v-show="isShowStars" class="row" style="align-items: center;justify-content: space-around;margin-top: 20rpx;">
			<zywork-icon :key="index" v-for="(item,index) in 3" type="icon-xingxing" size="40" :color="item<=gradesNumber&&isGrades?'#FFF500':'#ddd'"></zywork-icon>
		</view>
	</view>
</template>

<script>
	/* 
	 *@property {String,Boolean} isShowStars  是否显示星级
	 *@property {String,Number} gradesNumber  星级多少颗星
	 *@property {String,Boolean} isGrades  表示第几等级
	 */
	export default {
		name:"grades-item",
		props:{
			imgUrl:{ //等级图标
				type:String,
				default:"/static/my-user/grades1.png"
			},
			title:{
				type:String,
				default:"环保留级生"
			},
			gradesNumber:{
				type:[String,Number],
				default:1
			},
			isGrades:{
				type:[String,Boolean],
				default:false
			},
			isShowStars:{
				type:[String,Boolean],
				default:true
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	.grades-item {
		width: 210rpx;
		align-items: center;
		justify-content: flex-start;
		.grades {
			width: 150rpx;
			height: 150rpx;
			border: solid 1rpx #dddddd;
			border-radius: 50%;
		}
	}
	
	.view-active{
		background-color: rgba($color: #000000, $alpha: 0.1);
	}
</style>
